<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>练习2</title>
    <style>
        body {
            width: 100%;
            margin: 0px;
        }
        
        #one {
            width: 100%;
            /*设置导航条固定定位在顶部*/
            position: fixed;
            background-color: black;
        }
        
        .dht {
            float: left;
            margin-left: 300px;
        }
        
        .dht>li {
            float: left;
            margin-left: 20px;
        }
        
        #one>button {
            float: right;
            margin-right: 300px;
            margin-top: 15px;
            border: 1px solid gray;
            background-color: black;
            color: gray;
        }
        
        .dht>li>a {
            text-decoration: none;
            color: gray;
        }
        
        .dht>li>a:hover {
            text-decoration: underline;
            color: white;
        }
        #twe{
            width: 100%;
            height: 500px;
            background: linear-gradient(to right,#190C39,#5F2C4E);
            text-align: center;
            padding-top: 54px;           
        }
        #twe>h1{
            font-size: 100px;
            color: white;
        }
        #twe>p{
            color: white;
            font-size: 30px;
            margin: -70px;
        }
        #twe>button{
            width: 300px;
            height: 50px;
            background-color: #337AB7;
            color: white;
            border: 1px solid gray;
            border-radius: 6px;
            margin-top: 100px;
            margin-left: 20px;
            font-size: 18px;
        }
        #twe>a{
            display: block;
            margin-top: 20px;
            text-decoration: none;
            color: gray;
        }
        #three{
            
            background-color: #F5F5F5;
            text-align: center;
        }
        #three>a{
            text-decoration: none;
            color: gray;
            margin: 10px;
            display: inline-block;
            
        }
        #three>a:hover{
            text-decoration: underline;
            color: red;
        }
        hr{
            margin: 0px;
            color: gray;
            font-size: 0.5px;
        }
    </style>
</head>

<body>
    <div id="header">
        <nav id="one">
            <ul class="dht">
                <li><a href="">Bootstrap中文网</a></li>
                <li><a href="">Bootstrap2中文文档</a></li>
                <li><a href="">Bootstrap3中文文档</a></li>
                <li><a href="">Bootstrap4.0预览</a></li>
                <li><a href="">Less教程</a></li>
                <li><a href="">jQuery API</a></li>
                <li><a href="">网站实例</a></li>
            </ul>
            <button>关于</button>
        </nav>
        <nav id="twe">
           <h1>Bootstrap</h1>
           <p>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</p>
           <button>Bootstrap3中文文档(v3.3.7)</button>
           <a href="">Bootstrap2中文文档(v2.2.7)</a>
        </nav>
        <nav id="three">
            <a href="">中文网66666</a>
            <a href="">英文网66666</a>
            
        </nav>
        <hr>
    </div>
</body>

</html>